<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>以鼠标位置为中心的滑轮放大功能demo</title>
    <style type="text/css">
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
            padding: 0;
        }

        #oImg {
            position: absolute;
            left: 50px;
            top: 50px;
            z-index: 1;
        }
    </style>
    <script type="text/javascript">
        /*绑定事件*/
        function addEvent(obj, sType, fn) {
            if (obj.addEventListener) {
                obj.addEventListener(sType, fn, false);
            } else {
                obj.attachEvent('on' + sType, fn);
            }
        };

        /*移除事件*/
        function removeEvent(obj, sType, fn) {
            if (obj.removeEventListener) {
                obj.removeEventListener(sType, fn, false);
            } else {
                obj.detachEvent('on' + sType, fn);
            }
        };

        /*去除默认事件*/
        function prEvent(ev) {
            var oEvent = ev || window.event;
            if (oEvent.preventDefault) {
                oEvent.preventDefault();
            }
            return oEvent;
        }

        /*添加滑轮事件*/
        function addWheelEvent(obj, callback) {
            if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
                addEvent(obj, 'DOMMouseScroll', callback);
            } else {
                addEvent(obj, 'mousewheel', callback);
            }
        };
        /*页面载入后*/
        window.onload = function () {
            var oImg = document.getElementById('oImg');
            /*拖拽功能*/
            (function () {
                addEvent(oImg, 'mousedown', function (ev) {
                    var oEvent = prEvent(ev),
                        oParent = oImg.parentNode,
                        disX = oEvent.clientX - oImg.offsetLeft,
                        disY = oEvent.clientY - oImg.offsetTop,
                        startMove = function (ev) {
                            if (oParent.setCapture) {
                                oParent.setCapture();
                            }
                            var oEvent = ev || window.event,
                                L = oEvent.clientX - disX,
                                T = oEvent.clientY - disY;
                            oImg.style.left = L + 'px';
                            oImg.style.top = T + 'px';
                            oParent.onselectstart = function () {
                                return false;
                            }
                        },
                        endMove = function (ev) {
                            if (oParent.releaseCapture) {
                                oParent.releaseCapture();
                            }
                            oParent.onselectstart = null;
                            removeEvent(oParent, 'mousemove', startMove);
                            removeEvent(oParent, 'mouseup', endMove);
                        };
                    addEvent(oParent, 'mousemove', startMove);
                    addEvent(oParent, 'mouseup', endMove);
                    return false;
                });
            })();
            
            /*以鼠标位置为中心的滑轮放大功能*/
            (function () {
                window.addEventListener('keydown', function (ev) {
                    let e = ev || event;
                    e.preventDefault();
                    if (e && e.keyCode === 16) {   //按住shift放大 
                        addWheelEvent(oImg, imgLarge)
                    }
                }, false);
                window.addEventListener('keyup', function (ev) {
                    kflag = false;
                    removeEvent(oImg, "mousewheel", imgLarge)
                }, false);
            })();

            function imgLarge(e) {
                let ratioL = (e.clientX - oImg.offsetLeft) / oImg.offsetWidth,
                    ratioT = (e.clientY - oImg.offsetTop) / oImg.offsetHeight,
                    ratioDelta = e.wheelDelta > 0 ? 1 + 0.1 : 1 - 0.1,

                    w = oImg.offsetWidth * ratioDelta,
                    h = oImg.offsetHeight * ratioDelta,
                    l = Math.round(e.clientX - (w * ratioL)),
                    t = Math.round(e.clientY - (h * ratioT));
                // with，性能变低，不利于优化

                with (oImg.style) {
                    width = w + 'px';
                    height = h + 'px';
                    left = l + 'px';
                    top = t + 'px';
                }
            }
        };

    </script>
</head>

<body>
<img id="oImg"
     src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2e9fca3c0564550b03f176a2b329ceb~tplv-k3u1fbpfcp-watermark.image"/>
</body>

</html>